PostCSS Gap Properties
PostCSS Gap Properties lets you use the gap
, column-gap
, and row-gap
shorthand properties in CSS.
.standard-grid {
gap: 20px;
}
.spaced-grid {
column-gap: 40px;
row-gap: 20px;
}
/* becomes */
.standard-grid {
grid-gap: 20px;
gap: 20px;
}
.spaced-grid {
grid-column-gap: 40px;
column-gap: 40px;
grid-row-gap: 20px;
row-gap: 20px;
}
Usage
Add PostCSS Gap Properties to your build tool:
npm install postcss-gap-properties --save-dev
Node
Use PostCSS Gap Properties to process your CSS:
import postcssGapProperties from 'postcss-gap-properties';
postcssGapProperties.process(YOUR_CSS, , );
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Use PostCSS Gap Properties as a plugin:
import postcss from 'gulp-postcss';
import postcssGapProperties from 'postcss-gap-properties';
postcss([
postcssGapProperties()
]).process(YOUR_CSS);
Webpack
Add PostCSS Loader to your build tool:
npm install postcss-loader --save-dev
Use PostCSS Gap Properties in your Webpack configuration:
import postcssGapProperties from 'postcss-gap-properties';
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'postcss-loader', options: {
ident: 'postcss',
plugins: () => [
postcssGapProperties()
]
} }
]
}
]
}
}
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Use PostCSS Gap Properties in your Gulpfile:
import postcss from 'gulp-postcss';
import postcssGapProperties from 'postcss-gap-properties';
gulp.task('css', () => gulp.src('./src/*.css').pipe(
postcss([
postcssGapProperties()
])
).pipe(
gulp.dest('.')
));
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Use PostCSS Gap Properties in your Gruntfile:
import postcssGapProperties from 'postcss-gap-properties';
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
postcssGapProperties()
]
},
dist: {
src: '*.css'
}
}
});
Options
preserve
The preserve
option determines whether the original gap
declaration should
remain in the CSS. By default, the original declaration is preserved.